<template>
    <form v-if="globalStore.isWX" @submit="submit">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <template v-if="userStore.avatar">
                <image class="avatar" :src="userStore.avatar"></image>
            </template>
            <template v-if="avatar">
                <image class="avatar" :src="avatar"></image>
            </template>
            <template v-else>
                <LocalImage class="avatar" src="default-avatar.png" />
            </template>
        </button>

        <input class="input" type="nickname" v-model="nickname" name="nickname" placeholder="请填写昵称"/>

        <view class="p-l-r m-t-60">
            <nut-button type="success" form-type="submit" size="large" block>保存</nut-button>
        </view>
    </form>
    <template>
        <view class="wrap">
            <button
            block
            class="button"
            open-type="getAuthorize"
            scope="userInfo"
            @GetAuthorize="aliGetUserInfo"
            >获取头像昵称</button>
        </view>
    </template>
</template>

<script lang="ts" setup>
    import { uploadAvatarNicknameApi, updateInfoApi } from '@/api/User';
    import LocalImage from '@/components/LocalImage/index.vue'
import { useGlobalStore } from '@/stores';
import { useUserStore } from '@/stores/user';
import { getOpenUserInfo, hideLoading, navigateBack, redirectTo, showLoading, showModal, showToast, useRouter } from '@/utils/framework';
    import { ref } from 'vue';
    
    const router = useRouter()
    const redirect = router.params.redirect || ''

    
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

    const avatar = ref<string>()
    const nickname = ref<string>(userStore.nickname)

    function onChooseAvatar(e) {
        avatar.value = e.detail.avatarUrl
    }


    async function submit(e) {
        const nick = e.detail.value.nickname
        if(!userStore.avatar) {
            if(!avatar.value) {
                showToast('请选择头像')
                return
            }
        }

        if(!nick) {
            showToast('请填写昵称')
            return
        }

        showLoading()

        if(avatar.value) {
            const r = await uploadAvatarNicknameApi(avatar.value, nick)
            hideLoading()
            if(r.success) {
                userStore.avatar = r.data.avatar
                userStore.nickname = nick
                showToast('保存成功')
            }else {
                showModal('保存失败')
                return
            }
        }else {
            if(nick != userStore.nickname) { //有修改昵称
                const r = await updateInfoApi({nickname : nick})
                if(r.success) {
                    userStore.nickname = nick
                    showToast('保存成功')
                }else {
                    showModal('保存失败')
                    return
                }
            }
        }

        if(redirect) {
            redirectTo(decodeURIComponent(redirect))
        }else {
            navigateBack()
        }

        
    }

    function aliGetUserInfo() {
        getOpenUserInfo({
            async success (res) {
                let userInfo = JSON.parse(res.response).response
                const r = await updateInfoApi({nickname : userInfo.nickName, avatar : userInfo.avatar})
                if(r.success) {
                    userStore.nickname = userInfo.nickName
                    userStore.avatar = userInfo.avatar
                    showToast('保存成功')
                }else {
                    showModal('保存失败')
                    return
                }

                if(redirect) {
                    redirectTo(decodeURIComponent(redirect))
                }else {
                    navigateBack()
                }
            },
            fail: (err) => {
                console.log(err)
            }
        });
    }
</script>

<style lang="scss" src="./index.scss"></style>